嗨再次見面
相信大家看過前面幾章，應該可以大致上了解 CSS 的由來和概念吧！今天我們要來引用
前面的幾個概念，來完成這次的編程，那就開始吧！GOGO!
在開始前，我們必須先了解這個東西（阿對對對我就是文章小偷）以致在後面講解時你們
會比較好理解。
顧名思義，就是一個來選取事物的東西，select 這個名詞在 CSS 中扮演的是一種模式，這個模式呢，就是專門來尋找 element 的模式，而 selectors 就是負責去實踐這個模式的重要工具。
好啦不要拖太長
接下來要講些關於 attribute 的事，這邊的 attribute 不包含 global attribute
只要是有關於 attribute 的相關程式碼，都要加兩個中括號（[ ]）有學過數學的應該都知道，
中括號就是處裡括號的四則運算，相信大家都很了解，或許有人會看不懂，那我就直接放程式碼：
<!DOCTYPE html>
<html>
<head></head>
<style>
input[value] {
color: purple;
}
</style>
<body>
<input value="蕪湖～" />
<input value="你要我怎麼荔枝？" />
</body>
</html>
輸出如下：
如果你想讓這兩個文字顏色不一樣，怎麼辦？
只要在 value 輸入你想要的文字，在<body>後面記得加上你所選的文字就行了。
假如你有更多的文字，都是一樣的方法，只不過要記得，下一串程式碼，要在大括號外面
輸出如下圖
這樣就行了。
這個功能，主要是針對鼠標，他的運作原理是這樣的：網頁開發者，為了讓網頁訪問者知道，
點擊這個 element，有特殊功能，就是一個好心人，負責提醒網頁訪問者，有點像這樣：
把鼠標放上去前：
鼠標放上去後：
可以看到有明顯的差異，要怎麼做到這一點呢？
輸出如下：
點之前：
點之後：
很神奇對吧！你也趕快去試試吧！
今天我們時做了好玩的 CSS，還教大家滑鼠的應用（真的很好玩）
下一章就是我們 CSS 的番外篇啦！不出意外的話，明天應該是 CSS 主題的最後一章了，
總算阿，連續了 6 篇（我可真是一個稱職的文章小偷啊哈哈哈）那就請大家敬請期待！
iThome鐵人賽
看影片追技術